{extend name="common/main"/}

{block name="body"}
    <div class="index-content-box">
        <div class="">
            <div class="count clearfix">
                <div class="col-lg-3 col-xs-6">
                    <div class="small-box bg-green">
                        <div class="inner">
                          <h3>{$count.today_action_log}</h3>
                          <p>{:lang('_USER_ACTION_TODAY_')}</p>
                        </div>
                        <div class="small-icon-box">
                            <i class="icon icon-tasks"></i>
                        </div>
                        <a href="{:Url('action/actionlog')}" class="small-box-footer">
                            更多 <i class="icon-circle-arrow-right"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-xs-6">
                    <div class="small-box bg-blue">
                        <div class="inner">
                          <h3>{$count.today_user} </h3>
                          <p>{:lang('_USER_INCREASE_TODAY_')}</p>
                        </div>
                        <div class="small-icon-box">
                            <i class="icon icon-user"></i>
                        </div>
                        <a href="{:Url('user/index')}" class="small-box-footer">
                            更多 <i class="icon-circle-arrow-right"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-xs-6">
                    <div class="small-box bg-yellow">
                        <div class="inner">
                          <h3>{$count.total_user} </h3>
                          <p>{:lang('_USER_COUNT_')}</p>
                        </div>
                        <div class="small-icon-box">
                            <i class="icon icon-bar-chart-alt"></i>
                        </div>
                        <a href="{:Url('user/index')}" class="small-box-footer">
                            更多 <i class="icon-circle-arrow-right"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-xs-6">
                    <div class="small-box bg-red">
                        <div class="inner">
                          <h3>{$count.login_users}</h3>
                          <p>{:lang('_USER_LOGIN_TODAY_')}</p>
                        </div>
                        <div class="small-icon-box">
                            <i class="icon icon-group"></i>
                        </div>
                        <a href="{:Url('user/index?order=login_time')}" class="small-box-footer">
                            更多 <i class="icon-circle-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="index-content-box">    
        <div class="sortblock clearfix">
            {include file="index/_sort_file"/}
        </div>
    </div>

    <div class="modal fade" id="settingCount">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                        class="sr-only">{:lang('_CLOSE_')}</span></button>
                <h4 class="modal-title">{:lang('_STATISTICS_SET_')}</h4>
            </div>
            <div class="modal-body">
                
                <label>{:lang('_DISPLAY_DAYS_DEFAULT_')} </label>
                <input class="form-control" name="count_day" value="{$count_day}">
                
            </div>
            <div class="modal-footer">
                <button class="btn " data-role="saveCountSetting">
                    <i class="icon-ok"></i> {:lang('_SAVE_')}
                </button>
                <button class="btn " data-dismiss="modal">
                    <i class="icon-remove"></i> {:lang('_CANCEL_')}
                </button>
            </div>
        </div>
    </div>
</div>

<div id="state"></div>
{/block}

{block name="script"}
<!-- jQuery UI 1.11.4 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!-- ChartJS 1.0.1 -->
<script src="__ZUI__/lib/chart/zui.chart.min.js"></script>
<script>
$(function(){
    $('[data-role="saveCountSetting"]').click(function () {
        $.post(Url('admin/Index/console'), {count_day: $('[name=count_day]').val()}, function (msg) {
            handleAjax(msg);
        });
    })
});
$(function(){
//图表配置项
    var options = {
        ///Boolean - 是否在图表上显示网格
        scaleShowGridLines : true,
        //String - 网格线条颜色
        scaleGridLineColor : "rgba(0,0,0,.05)",
        //Number - 网格宽度
        scaleGridLineWidth : 1,
        //Boolean - 是否显示水平坐标，即X轴
        scaleShowHorizontalLines: true,
        //Boolean - 是否显示垂直坐标，即Y轴
        scaleShowVerticalLines: true,
        //Boolean - 是否显示为平滑曲线
        bezierCurve : true,
        //Number - 平滑曲线时所使用的贝塞尔曲线参数
        bezierCurveTension : 0.4,
        //Boolean - 是否显示顶点
        pointDot : true,
        //Number - 顶点半径，单位像素
        pointDotRadius : 4,
        //Number - 顶点描边线条宽度，单位像素
        pointDotStrokeWidth : 1,
        //Number - 检测鼠标点击所使用依据的半径大小，单位像素
        pointHitDetectionRadius : 20,
        //Boolean - 是否
        datasetStroke : true,
        //Number - 数据集线条宽度，单位为像素
        datasetStrokeWidth : 2,
        //Boolean - 是否用颜色来填充数据集
        datasetFill : true,

    }; // 图表配置项，可以留空来使用默认的配置

    //N日用户增长
    var regMemberList={$regMember};
    var regMemberChartData={
        labels: regMemberList.days,
        datasets: [
            {
                fillColor: "rgba(23,182,200,0.2)",
                strokeColor: "rgba(23,182,200,1)",
                pointColor: "rgba(23,182,200,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: regMemberList.data
            }
        ]
    }

    //日活跃
    var activeList={$activeList};
    var dayLineChartData={
        labels: activeList.labels,
        datasets: [
            {
                fillColor: "rgba(23,182,200,0.2)",
                strokeColor: "rgba(23,182,200,1)",
                pointColor: "rgba(23,182,200,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: activeList.datas.num
            }
        ]
    }
    //周活跃
    var weekActiveList={$weekActiveList};
    var weekLineChartData={
        labels: weekActiveList.labels,
        datasets: [
            {
                fillColor: "rgba(23,182,200,0.2)",
                strokeColor: "rgba(23,182,200,1)",
                pointColor: "rgba(23,182,200,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: weekActiveList.datas.num
            }
        ]
    }
    //月活跃
    var monthActiveList={$monthActiveList};
    var monthLineChartData={
        labels: monthActiveList.labels,
        datasets: [
            {
                fillColor: "rgba(23,182,200,0.2)",
                strokeColor: "rgba(23,182,200,1)",
                pointColor: "rgba(23,182,200,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: monthActiveList.datas.num
            }
        ]
    }

    //用户行为数据
    var actionLog={$actionLog};
    var actionLogChartData={
        labels: actionLog.days,
        datasets: [
            {
                fillColor: "rgba(23,182,200,0.2)",
                strokeColor: "rgba(23,182,200,1)",
                pointColor: "rgba(23,182,200,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: actionLog.data
            }
        ]
    }

    var regMember,dayActiveChart,weekActiveChart,monthActiveList,actionLogChart;
    var refreshChart=function($tag){
        switch ($tag){
            case 'reg_member':
                regMember = $("#regMember").lineChart(regMemberChartData,options);
                break;
            case 'count_active_day':
                dayActiveChart = $("#dayActiveChart").lineChart(dayLineChartData,options);
                break;
            case 'count_active_week':
                weekActiveChart = $("#weekActiveChart").lineChart(weekLineChartData, options);
                break;
            case 'count_active_month':
                monthActiveChart = $("#monthActiveChart").lineChart(monthLineChartData, options);
                break;
            case 'actionLog':
                actionLogChart = $("#actionLogChart").lineChart(actionLogChartData, options);
                break;
            default :;
        }
    }
    refreshChart('reg_member');
    refreshChart('actionLog');
    refreshChart('count_active_day');
    refreshChart('count_active_week');
    refreshChart('count_active_month');

    // Make the dashboard widgets sortable Using jquery UI
    $('.connectedSortable').sortable({
      placeholder         : 'sort-highlight',
      connectWith         : '.connectedSortable',
      handle              : '.box-header',
      opacity             : 0.6,
      forcePlaceholderSize: true,
      zIndex              : 999999,

    });

    $('.connectedSortable .box-header').css('cursor', 'move');
});

</script>

{/block}   
    